<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }

        #div1 {

            background-color: #4dc71f;
        }

        #div2 {
            background-color: #ff2a00;
            /*border-top: 5px solid black;*/
            padding-top: 50px;
        }

        #div3 {
            width: 100px;
            height: 100px;
            background-color: orange;
            /*margin-top: 50px;*/

        }

        /*黄色的div 向下走了 为什么 父元素也向下走了*/
    </style>
</head>
<body>
<div id="div1">

</div>
<div id="div2">
    <div id="div3"></div>
</div>
<!--外边距溢出
    在特殊条件下，为字元素设置上外边距时，会作用到父元素上
    1.父元素没有上边框
    2.为第一个子元素设置上外边距时
    解决方案：
        1.给父元素增加一个上外边框
            存在弊端 对父元素的高度有影响
        2.使用父元素的内边距来取代子元素的上外边距


-->
</body>
</html>